<template>
	<view class="container">
		<swiper class="materials-swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(img, index) in detail.images" :key="index">
				<image :src="img.url" class="w-100" mode="widthFix"></image>
			</swiper-item>
		</swiper>
		<view class="p-30 bg-white mb-20">
			<view class="d-flex justify-content-between align-items-center mb-30">
				<view class="font-size-extra-lg text-color-primary font-weight-bold">￥{{ parseFloat(detail.price) }}</view>
				<view class="font-size-sm text-color-assist">{{ detail.id }}人已购买</view>
			</view>
			<view class="font-size-extra-lg mb-10">{{ detail.name }}</view>
			<view class="font-size-sm text-color-assist">{{ detail.description }}</view>
		</view>
		<view class="p-30 bg-white mb-20 font-size-sm">
			<view class="mb-40 d-flex">
				<view class="mr-40 text-color-assist">品牌</view>
				<view>{{detail.label}}</view>
			</view>
			<view class="d-flex align-items-center">
				<view class="mr-40 text-color-assist">发货</view>
				<view class="flex-fill d-flex justify-content-between align-items-center">
					<view class="d-flex align-items-center">
						<view>江苏镇江</view>
						<view class="divider" />
						<view>快递：￥10</view>
					</view>
					<view class="text-color-assist">预计 1-3天发货</view>
				</view>
			</view>
		</view>
		<view class="p-30 bg-white">
			<view class="mt-30 mb-30 text-center">商品详情</view>
			<jyf-parser :html="detail.describe" ref="article"></jyf-parser>
			<image v-for="(img,index) in swipers" :key="index" :src="img.AdsImg" class="w-100" mode="widthFix"></image>
		</view>
		<view class="footer">
			<view class="grid">
				<view class="item" @click="toMart()">
					<image src="/static/images/mall/store_brh_home_page_normal.png"></image>
					<view>百货</view>
				</view>
				<view class="item">
					<image src="/static/images/mall/store_brh_service_normal.png"></image>
					<!-- <view>客服</view> -->
					<button open-type="contact" class="kefu">客服</button>
				</view>
			</view>
			<view class='btns'>
				<button type="info" @click="handleAddToCart(detail)">加入购物车</button>
				<button type="primary" @click="toPay()">立即购买</button>
			</view>
		</view>
		
		<!-- 购物车栏 begin -->
		<cart-bar :cart="cart" @add="handleAddToCart" @minus="handleMinusFromCart" @clear="clearCart" @pay="pay" />
		<!-- 购物车栏 end -->
	</view>
</template>

<script>
	import jyfParser from "@/components/jyf-parser/jyf-parser"
	import CartBar from '@/pages/index/components/cartbar/cartbar.vue'
	
	export default {
		components: {
			CartBar
		},
		data() {
			return {
				cart: [],
				swipers: [],
				detail: {}
			}
		},
		async created() {
			this.getAds();
		},
		async onLoad(options) {
			this.detail=JSON.parse(options.product);
		},
		computed: {
			productCartNum() { //计算单个饮品添加到购物车的数量
				return id => this.cart.reduce((acc, cur) => {
					if (cur.id === id) {
						return acc += cur.number
					}
					return acc
				}, 0)
			}
		},
		methods: {
			pay() {
				uni.setStorageSync('cart', this.cart)
				uni.navigateTo({
					url: '/pages/pay/pay'
				})
			},
			//添加到购物车
			handleAddToCart(product) {
				const index = this.cart.findIndex(item => {
					if (!product.is_single) {
						return (item.id == product.id) && (item.materials_text == product.materials_text)
					} else {
						return item.id === product.id
					}
				})

				if (index > -1) {
					this.cart[index].number += (product.number || 1)
					return
				}

				this.cart.push({
					id: product.id,
					cate_id: product.category_id,
					name: product.name,
					price: product.price,
					number: product.number || 1,
					image: product.name_image, // product.images[0].url,
					is_single: product.is_single,
					materials_text: product.materials_text || ''
				})
			},
			
			//从购物车减商品
			handleMinusFromCart(product) { 
				let index
				if (product.is_single) {
					index = this.cart.findIndex(item => item.id == product.id)
				} else {
					index = this.cart.findIndex(item => (item.id == product.id) && (item.materials_text == product.materials_text))
				}
				this.cart[index].number -= 1
				if (this.cart[index].number <= 0) {
					this.cart.splice(index, 1)
				}
			},
			
			//立即购买
			toPay(){
				handleAddToCart(this.detail);
				uni.navigateTo({
					url:"/pages/pay/pay"
				})
			},
			toMart() {
				uni.switchTab({
					url: '/pages/mart/mart'
				})
			},
			//获取广告数据
			getAds() {
				let that = this;
				let whe = [];
				whe.push({
					"name": "AdsType",
					"value": 6,
					"displayType": 'text'
				});
				let cateOp = {
					url: "api/Lx_Self_Ads/UI_GetPageData",
					data: {
						"page": 1,
						"rows": 20,
						"sort": "CreateDate",
						"order": "desc",
						"wheres": JSON.stringify(whe)
					}
				}

				this.$request.Post(cateOp, (ret) => {
					if (ret.rows.length > 0) {
						that.swipers = [];
						that.swipers = ret.rows;
						that.swipers.map(n => {
							n.AdsImg = that.$request.setImgUrl(n.AdsImg, "ttt");
							return n;
						});

					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: auto;
		padding-bottom: 120rpx;
	}

	.materials-swiper {
		height: 750rpx;
	}

	.divider {
		width: 1rpx;
		background-color: rgba($color: $border-color, $alpha: 0.6);
		margin: 0 20rpx;
		height: 0.8rem;
	}

	.footer {
		height: 120rpx;
		padding: 10rpx 20rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #FFFFFF;
		z-index: 10;

		.grid {
			display: flex;
			align-items: center;
			font-size: $font-size-sm;

			.item {
				padding: 0 20rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				image {
					width: 48rpx;
					height: 48rpx;
					margin-bottom: 10rpx;
				}

				.kefu {
					width: 100%;
					text-align: left;
					padding: 0;
					height: 16px;
					line-height: 16px;
					font-size: 15px;
					color: rgb(52, 52, 52);
					background-color: #ffffff;
				}
			}
		}

		.btns {
			display: flex;

			button {
				font-size: $font-size-lg;
				padding: 0 40rpx;

				&:nth-child(1) {
					margin-right: 20rpx;
				}
			}
		}
	}
</style>
